<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      button {
        margin-left: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <button @click="addCountData">data：{{countData}}</button>
      <button @click="addCountApp">app：{{countApp}}</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    const app = Vue.createApp({
      data() {
        return {
          countData: 0
        };
      },
      methods: {
        addCountData() {
          // 当countData不涉及到视图更新可不再data中定义，直接挂载到该组件实例
          this.countData += 2;
        },
        addCountApp() {
          app.countApp += 2;
        },
      }
    }).mount('#app');
    
    app.countApp = 0;
  </script>
</html>